<template>
  <div class="w100">
      <template v-if="state.images.length<=0">
          <div class="dropFile jcc aic" @drag="onChangeFile">
             <el-empty
 style="width: 179px;"
  description="当前列表为空，上传你的第一个文件吧"
  >
     <div class="nodataEmpty">
      (支持拖拽)
     </div>
  </el-empty>
          </div>
           
      </template>
      <template v-else>
          <el-tree
      :data="state.images"
      node-key="id"
      label="name"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="aic">
         <img 
         v-if="data.type=='directory'"
         style="width:24px;height:24px" :src="image" alt="" srcset="">
         <span>{{ data.name }}</span>
        </span>
      </template>
    </el-tree>
      </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { useRouter, useRoute} from "vue-router";
import {
  image
} from '@/layouts/image'
const router = useRouter();
const route = useRoute();

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const dialogVisible = ref(true);
const state = reactive({
  images:[]
});
const onChangeFile = (event) =>{
  console.log('uploadFiles :>> ', event);
}
onMounted(() => {
  console.log('image :>> ', image);
  nextTick(()=>{
    var div=document.querySelector('.dropFile');
    //绑定拖拽事件
div.addEventListener('drop', function(e){
    //必须要阻止拖拽的默认事件
    e.preventDefault();
    e.stopPropagation();
   
    //获得拖拽的文件集合
    var files=e.dataTransfer.files;

    if(files.length>0)
    {
   //获取文件路径
        const file = files[0].path;
        state.images =  window.electron.getFilesData(file)
    ;
    }
  });

//绑定拖拽结束事件
div.addEventListener('dragover',(e)=>{
    //必须要阻止拖拽的默认事件
    e.preventDefault();
    e.stopPropagation();

})
  })
});
</script>
<style lang="scss">
.dropFile{
  border: 1px dotted #999;
  height: 100%;
  margin: 5px;
  box-sizing: border-box;
}


.nodataEmpty{
  font-size: 12px;
  color: #999;
}

</style>
<style scoped lang="scss">
</style>
